<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1 {
				/* width: 12.5rem; */
				/* height: 12.5rem; */
				background-color: greenyellow;
			}

			.d2 {
				/* width: 18.75rem; */
				/* height: 18.75rem; */
				background-color: orange;
				/* border: aquamarine solid 1px; */
			}
		</style>
		<script type="text/javascript">
			var flag = true;
			function fn() {
				var divNode = document.querySelector("body");
				// divNode.style.backgroundColor = "orange";
				if (flag) {
					divNode.className = "d2";
					flag = false;
				} else {
					divNode.className = "d1";
					flag = true;
				}
			}
		</script>
	</head>
	<body>
		<div class="d1"></div>
		<button onclick="fn()">样式属性</button>
	</body>
</html>
